<template>
	<view class="container">
		<!-- 头部标题 -->
		<view class="header">
			<text class="header-title">试卷详情</text>
		</view>
		
		<!-- 试卷基本信息 -->
		<view class="exam-info-card">
			<view class="card-header">
				<text class="card-title">{{ examInfo.title || '未命名试卷' }}</text>
				<view class="exam-status" :class="{'status-active': examInfo.status === 'active', 'status-paused': examInfo.status === 'paused'}">
					{{ examInfo.status === 'active' ? '进行中' : '已暂停' }}
				</view>
			</view>
			
			<view class="card-content">
				<view class="info-row">
					<view class="info-item">
						<text class="info-label">发布时间</text>
						<text class="info-value">{{ formatDate(examInfo.createTime) }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">试卷类型</text>
						<text class="info-value">{{ examInfo.examType || '常规考试' }}</text>
					</view>
				</view>
				
				<view class="info-row">
					<view class="info-item">
						<text class="info-label">考试时长</text>
						<text class="info-value">{{ examInfo.duration || 60 }}分钟</text>
					</view>
					<view class="info-item">
						<text class="info-label">总分值</text>
						<text class="info-value">{{ examInfo.totalScore || 100 }}分</text>
					</view>
				</view>
				
				<view class="info-row">
					<view class="info-item">
						<text class="info-label">及格分数</text>
						<text class="info-value">{{ examInfo.passScore || 60 }}分</text>
					</view>
					<view class="info-item">
						<text class="info-label">分享次数</text>
						<text class="info-value">{{ examInfo.shareCount || 0 }}次</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 统计概览 -->
		<view class="statistics-card">
			<view class="card-title">统计概览</view>
			<view class="statistics-content">
				<view class="stat-item">
					<text class="stat-value">{{ statistics.participantCount || 0 }}</text>
					<text class="stat-label">参与人数</text>
				</view>
				<view class="stat-item">
					<text class="stat-value">{{ statistics.avgScore || 0 }}</text>
					<text class="stat-label">平均分</text>
				</view>
				<view class="stat-item">
					<text class="stat-value">{{ statistics.passRate || '0%' }}</text>
					<text class="stat-label">通过率</text>
				</view>
				<view class="stat-item">
					<text class="stat-value">{{ statistics.highestScore || 0 }}</text>
					<text class="stat-label">最高分</text>
				</view>
			</view>
		</view>
		
		<!-- 考试记录标签页 -->
		<view class="tabs">
			<view class="tab-header">
				<view class="tab-item" :class="{ active: activeTab === 'records' }" @click="activeTab = 'records'">
					考试记录
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'analytics' }" @click="activeTab = 'analytics'">
					成绩分析
				</view>
			</view>
			
			<view class="tab-content">
				<!-- 考试记录列表 -->
				<view v-if="activeTab === 'records'">
					<!-- 筛选区域 -->
					<view class="filter-bar">
						<input class="search-input" type="text" v-model="searchKeyword" placeholder="搜索学生姓名" @confirm="searchRecords" />
						<picker class="score-filter" :value="scoreFilterIndex" :range="scoreFilterOptions" @change="onScoreFilterChange">
							<view class="picker-text">{{ scoreFilterOptions[scoreFilterIndex] }}</view>
						</picker>
					</view>
					
					<!-- 空状态 -->
					<view class="empty-state" v-if="examRecords.length === 0 && !loading">
						<image class="empty-image" src="/static/images/empty-data.png" mode="aspectFit"></image>
						<text class="empty-text">暂无考试记录</text>
					</view>
					
					<!-- 记录列表 -->
					<scroll-view class="record-list" 
						scroll-y 
						@scrolltolower="loadMoreRecords" 
						v-if="examRecords.length > 0">
						<view class="record-item" v-for="(item, index) in examRecords" :key="index">
							<view class="student-info">
								<image class="student-avatar" :src="item.userInfo.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
								<view class="student-detail">
									<text class="student-name">{{ item.user_name || (item.userInfo && item.userInfo.nickname) || '未知学生' }}</text>
									<text class="exam-time">{{ formatDateTime(item.createTime) }}</text>
								</view>
							</view>
							<view class="record-score" :class="{'score-pass': item.isPassed, 'score-fail': !item.isPassed}">
								<text class="score-value">{{ item.score }}</text>
								<text class="score-status">{{ item.isPassed ? '通过' : '未通过' }}</text>
							</view>
						</view>
						
						<!-- 加载更多 -->
						<view class="loading-more" v-if="hasMoreRecords">
							<text>正在加载更多...</text>
						</view>
						<view class="no-more" v-else>
							<text>没有更多数据了</text>
						</view>
					</scroll-view>
				</view>
				
				<!-- 成绩分析 -->
				<view v-if="activeTab === 'analytics'">
					<view class="analytics-section">
						<view class="analytics-header">
							<text class="section-title">分数分布</text>
						</view>
						
						<view class="score-distribution">
							<view class="distribution-item" v-for="(item, index) in scoreDistribution" :key="index">
								<view class="distribution-label">{{ item.range }}</view>
								<view class="distribution-bar-container">
									<view class="distribution-bar" :style="{width: item.percentage + '%', backgroundColor: getDistributionColor(index)}"></view>
									<text class="distribution-value">{{ item.count }}人 ({{ item.percentage }}%)</text>
								</view>
							</view>
						</view>
					</view>
					
					<view class="analytics-section">
						<view class="analytics-header">
							<text class="section-title">错题分析</text>
							<text class="analytics-desc">显示错误率最高的题目</text>
						</view>
						
						<view class="error-questions">
							<view class="error-item" v-for="(item, index) in errorQuestions" :key="index" v-if="index < 5">
								<view class="error-header">
									<text class="error-question-num">第{{ item.questionIndex + 1 }}题</text>
									<text class="error-rate">错误率: {{ item.errorRate }}%</text>
								</view>
								<view class="error-content">
									<text class="error-question-text">{{ item.questionText }}</text>
								</view>
							</view>
							
							<view class="view-all" @click="viewAllErrorQuestions" v-if="errorQuestions.length > 5">
								<text>查看全部</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 加载提示 -->
		<view class="loading-state" v-if="loading">
			<text>正在加载数据...</text>
		</view>
	</view>
</template>

<script>
	import { getToken } from '../../utils/tokenManager.js';

	export default {
		data() {
			return {
				examId: '',
				userInfo: null,
				examInfo: {},
				statistics: {
					participantCount: 0,
					avgScore: 0,
					passRate: '0%',
					highestScore: 0
				},
				activeTab: 'records',
				searchKeyword: '',
				scoreFilterIndex: 0,
				scoreFilterOptions: ['全部分数', '及格', '未及格', '优秀(90分以上)', '良好(75-89分)', '及格(60-74分)', '不及格(60分以下)'],
				examRecords: [],
				scoreDistribution: [],
				errorQuestions: [],
				page: 1,
				limit: 20,
				hasMoreRecords: true,
				loading: false,
				filterUserId: '',
				filterExamTitle: '',
				scoreFilters: ['全部', '通过', '未通过']
			}
		},
		onLoad(options) {
			if (options.id) {
				this.examId = options.id;
				// 获取用户信息
				this.getUserInfo();
			} else {
				this.showError('缺少试卷ID');
			}
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				const userInfoStr = uni.getStorageSync('userInfo');
				if (userInfoStr) {
					try {
						this.userInfo = JSON.parse(userInfoStr);
						console.log('已获取登录用户信息:', this.userInfo);
						// 检查权限
						this.checkPermission();
					} catch (e) {
						console.error('解析用户信息失败', e);
						this.userInfo = null;
						this.showError('获取用户信息失败');
					}
				} else {
					console.log('本地无用户信息，尝试从云端获取');
					this.getUserInfoFromCloud();
				}
			},
			
			// 从云端获取用户信息
			getUserInfoFromCloud() {
				uni.showLoading({
					title: '加载中...'
				});
				
				uniCloud.callFunction({
					name: 'getUserInfo',
					success: (res) => {
						uni.hideLoading();
						
						if (res.result.code === 0 && res.result.data) {
							this.userInfo = res.result.data;
							uni.setStorageSync('userInfo', JSON.stringify(this.userInfo));
							this.checkPermission();
						} else {
							this.showError('获取用户信息失败');
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('调用获取用户信息云函数失败', err);
						this.showError('网络错误，请重试');
					}
				});
			},
			
			// 检查权限
			checkPermission() {
				if (!this.userInfo) {
					this.showError('未登录');
					return;
				}
				
				// 检查是否为管理员
				const isadmin = this.userInfo.role === 4 || this.userInfo.role === "4" || this.userInfo.role === "admin" || this.userInfo.role === "管理员";
				
				// 检查证书状态
				const credentialStatus = String(this.userInfo.credential_status || '').toLowerCase();
				const status = String(this.userInfo.status || '').toLowerCase();
				
				const validStatusValues = ['approved', 'valid', 'verified', 'active', '有效', '通过', '已认证', '已通过'];
				const hasValidCredential = validStatusValues.some(value => 
					credentialStatus.includes(value) || status.includes(value)
				);
				
				if (!isadmin || !hasValidCredential) {
					this.showError('权限不足');
					return;
				}
				
				// 通过权限检查，获取考试信息
				this.fetchExamInfo();
				this.fetchExamStatistics();
				this.fetchExamRecords();
				this.fetchScoreDistribution();
				this.fetchErrorQuestions();
			},
			
			// 显示错误并返回
			showError(message) {
				uni.showModal({
					title: '提示',
					content: message,
					showCancel: false,
					success: () => {
						uni.navigateBack();
					}
				});
			},
			
			// 获取试卷信息
			async fetchExamInfo() {
				try {
					this.loading = true;
					const examService = uniCloud.importObject('exam-service');
					const res = await examService.getExamDetail({
						examId: this.examId,
						creatorId: this.userInfo ? this.userInfo._id : '',
						filterMyExams: true
					});
					
					this.loading = false;
					
					if (res.code === 0 && res.data) {
						this.examInfo = res.data;
						// 检查试卷是否属于当前用户
						if (this.userInfo && this.examInfo.creator_id !== this.userInfo._id) {
							this.showError('您无权查看该试卷');
						}
					} else {
						this.showError(res.message || '获取试卷信息失败');
					}
				} catch (err) {
					this.loading = false;
					console.error('获取试卷信息失败:', err);
					this.showError('网络错误，请重试');
				}
			},
			
			// 获取试卷统计信息
			async fetchExamStatistics() {
				try {
					const examService = uniCloud.importObject('exam-service');
					const res = await examService.getExamDetailStatistics({
						examId: this.examId,
						token: uni.getStorageSync('uni_id_token') || ''
					});
					
					if (res.code === 0 && res.data) {
						this.statistics = {
							participantCount: res.data.participantCount || 0,
							avgScore: res.data.avgScore || 0,
							passRate: res.data.passRate ? `${res.data.passRate}%` : '0%',
							highestScore: res.data.highestScore || 0
						};
					}
				} catch (err) {
					console.error('获取试卷统计信息失败:', err);
				}
			},
			
			// 获取考试记录
			async fetchExamRecords() {
				try {
					uni.showLoading({ title: '加载中...' });
					
					const adminService = uniCloud.importObject('admin-service');
					const res = await adminService.getAdminExamRecords({
						examId: this.examId,
						page: this.page,
						limit: this.limit,
						searchKeyword: this.searchKeyword,
						scoreFilter: this.scoreFilterOptions[this.scoreFilterIndex],
						token: uni.getStorageSync('uni_id_token') || ''
					});
					
					uni.hideLoading();
					
					if (res.code === 0) {
						if (this.page === 1) {
							this.examRecords = res.data;
						} else {
							this.examRecords = [...this.examRecords, ...res.data];
						}
						
						this.hasMoreRecords = res.data.length === this.limit;
						this.page++;
					} else {
						uni.showToast({
							title: res.message || '获取考试记录失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.hideLoading();
					console.error('调用云函数失败:', err);
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				}
			},
			
			// 获取分数分布
			async fetchScoreDistribution() {
				try {
					const examService = uniCloud.importObject('exam-service');
					const res = await examService.getExamDetailStatistics({
						examId: this.examId,
						type: 'score_distribution'
					});
					
					if (res.code === 0 && res.data) {
						this.scoreDistribution = res.data.scoreDistribution || [];
					}
				} catch (err) {
					console.error('获取分数分布失败:', err);
				}
			},
			
			// 获取错题分析
			async fetchErrorQuestions() {
				try {
					const examService = uniCloud.importObject('exam-service');
					const res = await examService.getExamDetailStatistics({
						examId: this.examId,
						type: 'error_questions'
					});
					
					if (res.code === 0 && res.data) {
						this.errorQuestions = res.data.errorQuestions || [];
					}
				} catch (err) {
					console.error('获取错题分析失败:', err);
				}
			},
			
			// 搜索记录
			searchRecords() {
				this.fetchExamRecords();
			},
			
			// 分数筛选变更
			onScoreFilterChange(e) {
				this.scoreFilterIndex = e.detail.value;
				this.fetchExamRecords();
			},
			
			// 加载更多记录
			loadMoreRecords() {
				if (this.hasMoreRecords && !this.loading) {
					this.fetchExamRecords(true);
				}
			},
			
			// 切换考试状态
			toggleExamStatus() {
				const newStatus = this.examInfo.status === 'active' ? 'paused' : 'active';
				const actionText = newStatus === 'active' ? '恢复' : '暂停';
				
				uni.showModal({
					title: '确认操作',
					content: `确定要${actionText}该考试吗？`,
					success: (res) => {
						if (res.confirm) {
							// 调用云函数更新状态
							uni.showLoading({
								title: '处理中...'
							});
							
							uniCloud.callFunction({
								name: 'updateExamStatus',
								data: {
									examId: this.examId,
									status: newStatus,
									token: uni.getStorageSync('uni_id_token') || ''
								},
								success: (res) => {
									uni.hideLoading();
									
									if (res.result.code === 0) {
										this.examInfo.status = newStatus;
										
										uni.showToast({
											title: '操作成功',
											icon: 'success'
										});
									} else {
										uni.showToast({
											title: res.result.message || '操作失败',
											icon: 'none'
										});
									}
								},
								fail: (err) => {
									uni.hideLoading();
									console.error('更新状态失败', err);
									uni.showToast({
										title: '网络错误，请重试',
										icon: 'none'
									});
								}
							});
						}
					}
				});
			},
			
			// 编辑试卷
			editExam() {
				uni.navigateTo({
					url: `/packageadmin/admin/exam-upload?id=${this.examId}&mode=edit`
				});
			},
			
			// 分享试卷
			shareExam() {
				uni.showLoading({
					title: '生成分享信息...'
				});
				
				uniCloud.callFunction({
					name: 'shareExam',
					data: {
						examId: this.examId,
						token: uni.getStorageSync('uni_id_token') || '',
						shareType: 'wechat'
					},
					success: (res) => {
						uni.hideLoading();
						
						if (res.result && res.result.code === 0) {
							const shareInfo = res.result.data;
							
							uni.showModal({
								title: '分享试卷',
								content: `试卷：${this.examInfo.title}\n分享码：${shareInfo.shareCode}`,
								confirmText: '复制',
								cancelText: '关闭',
								success: (modalRes) => {
									if (modalRes.confirm) {
										// 复制分享信息
										uni.setClipboardData({
											data: `试卷：${this.examInfo.title}\n分享码：${shareInfo.shareCode}`,
											success: () => {
												uni.showToast({
													title: '已复制到剪贴板',
													icon: 'success'
												});
											}
										});
									}
								}
							});
						} else {
							uni.showToast({
								title: res.result.message || '分享失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('分享试卷失败', err);
						uni.showToast({
							title: '网络错误，请重试',
							icon: 'none'
						});
					}
				});
			},
			
			// 查看所有错题
			viewAllErrorQuestions() {
				// 可以实现一个弹窗或新页面显示所有错题
				uni.showModal({
					title: '提示',
					content: '查看所有错题的功能正在开发中',
					showCancel: false
				});
			},
			
			// 获取分布图颜色
			getDistributionColor(index) {
				const colors = ['#f5222d', '#fa8c16', '#fadb14', '#a0d911', '#52c41a'];
				return colors[index % colors.length];
			},
			
			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr) return '';
				
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				
				return `${year}-${month}-${day}`;
			},
			
			// 格式化日期时间
			formatDateTime(dateStr) {
				if (!dateStr) return '';
				
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				
				return `${year}-${month}-${day} ${hour}:${minute}`;
			},
			
			// 添加处理认证错误的方法
			handleAuthError(message) {
				console.error('认证错误:', message);
				
				// 记录前端日志
				this.logClientError('auth_error', message);
				
				// 显示错误提示
				setTimeout(() => {
					uni.showModal({
						title: '登录已过期',
						content: '请重新登录后再试',
						confirmText: '去登录',
						success: (res) => {
							if (res.confirm) {
								// 清除旧的登录信息
								uni.removeStorageSync('userInfo');
								uni.removeStorageSync('uni_id_token');
								// 保存当前页面以便登录后返回
								uni.setStorageSync('redirect_page', `/packageadmin/admin/exam-details?id=${this.examId}`);
								// 跳转到登录页
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				}, 100);
			},
			
			// 记录前端错误日志
			logClientError(errorType, errorMessage) {
				// 获取设备信息
				const systemInfo = uni.getSystemInfoSync();
				
				// 准备日志数据
				const logData = {
					type: 'client_error',
					error_type: errorType,
					error_message: errorMessage,
					page: 'exam-details',
					exam_id: this.examId,
					user_id: this.userInfo ? this.userInfo._id : 'unknown',
					device_info: {
						platform: systemInfo.platform,
						brand: systemInfo.brand,
						model: systemInfo.model,
						system: systemInfo.system,
						SDKVersion: systemInfo.SDKVersion
					},
					timestamp: Date.now()
				};
				
				// 发送到云函数记录日志
				uniCloud.callFunction({
					name: 'logClientError',
					data: logData,
					success: (res) => {
						console.log('错误日志记录成功');
					},
					fail: (err) => {
						console.error('记录错误日志失败:', err);
					}
				});
			},
			
			// 更新统计数据
			updateStatistics(statistics) {
				if (!statistics) {
					console.warn('统计数据为空');
					return;
				}
				
				console.log('更新统计数据:', statistics);
				this.statistics = {
					participantCount: statistics.totalCount || 0,
					avgScore: statistics.avgScore || 0,
					passRate: statistics.passRate ? `${statistics.passRate}%` : '0%',
					highestScore: statistics.maxScore || 0
				};
				
				console.log('统计数据已更新:', this.statistics);
			},
			
			// 格式化记录数据
			formatRecords(records) {
				if (!records || !Array.isArray(records)) {
					console.warn('记录数据格式不正确:', records);
					return [];
				}
				
				console.log('格式化记录数据, 原始记录:', records);
				
				return records.map(record => {
					// 尝试获取用户信息
					const userInfo = record.userInfo || {};
					
					// 处理通过状态
					const isPassed = record.is_passed !== undefined ? record.is_passed : 
									(record.isPassed !== undefined ? record.isPassed : 
									(record.score >= (record.examInfo?.pass_score || 60)));
					
					return {
						_id: record._id,
						exam_id: record.exam_id || record.examId,
						user_id: record.user_id || record.userId,
						score: record.score || 0,
						isPassed: isPassed,
						createTime: record.create_time || record.createTime || record.submit_time || Date.now(),
						duration: record.duration || 0,
						user_name: record.user_name || userInfo.username || userInfo.nickname || userInfo.real_name || '',
						userInfo: userInfo,
						examInfo: record.examInfo || {}
					};
				});
			}
		}
	}
</script>

<style>
	@import "../admin/app.css";
	
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
	}
	
	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.exam-info-card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
		margin-bottom: 20rpx;
	}
	
	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		flex: 1;
	}
	
	.exam-status {
		padding: 6rpx 16rpx;
		font-size: 24rpx;
		border-radius: 20rpx;
	}
	
	.status-active {
		background-color: #e6f7ff;
		color: #1890ff;
	}
	
	.status-paused {
		background-color: #fff1f0;
		color: #ff4d4f;
	}
	
	.card-content {
		margin-bottom: 20rpx;
	}
	
	.info-row {
		display: flex;
		margin-bottom: 16rpx;
	}
	
	.info-row:last-child {
		margin-bottom: 0;
	}
	
	.info-item {
		flex: 1;
	}
	
	.info-label {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 6rpx;
		display: block;
	}
	
	.info-value {
		font-size: 28rpx;
		color: #333;
	}
	
	.card-actions {
		display: flex;
		border-top: 1rpx solid #f0f0f0;
		padding-top: 20rpx;
	}
	
	.action-btn {
		flex: 1;
		margin: 0 10rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 26rpx;
		border-radius: 6rpx;
	}
	
	.action-btn:first-child {
		margin-left: 0;
	}
	
	.action-btn:last-child {
		margin-right: 0;
	}
	
	.pause-btn {
		background-color: #fff1f0;
		color: #ff4d4f;
		border: 1rpx solid #ffa39e;
	}
	
	.resume-btn {
		background-color: #f6ffed;
		color: #52c41a;
		border: 1rpx solid #b7eb8f;
	}
	
	.edit-btn {
		background-color: #fff7e6;
		color: #fa8c16;
		border: 1rpx solid #ffd591;
	}
	
	.share-btn {
		background-color: #f9f0ff;
		color: #722ed1;
		border: 1rpx solid #d3adf7;
	}
	
	.statistics-card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.card-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.statistics-content {
		display: flex;
		justify-content: space-between;
	}
	
	.stat-item {
		flex: 1;
		text-align: center;
		padding: 10rpx 0;
	}
	
	.stat-value {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		color: #1BAE76;
		margin-bottom: 8rpx;
	}
	
	.stat-label {
		font-size: 24rpx;
		color: #999;
	}
	
	.tabs {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.tab-header {
		display: flex;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.tab-item {
		flex: 1;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #666;
		position: relative;
	}
	
	.tab-item.active {
		color: #1BAE76;
		font-weight: bold;
	}
	
	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #1BAE76;
	}
	
	.tab-content {
		padding: 20rpx;
	}
	
	.filter-bar {
		display: flex;
		margin-bottom: 20rpx;
	}
	
	.search-input {
		flex: 1;
		height: 70rpx;
		background-color: #f9f9f9;
		border: 1rpx solid #eee;
		border-radius: 6rpx;
		padding: 0 20rpx;
		margin-right: 20rpx;
	}
	
	.score-filter {
		width: 220rpx;
		height: 70rpx;
		background-color: #f9f9f9;
		border: 1rpx solid #eee;
		border-radius: 6rpx;
	}
	
	.picker-text {
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		font-size: 26rpx;
		color: #666;
	}
	
	.empty-state {
		padding: 100rpx 0;
		text-align: center;
	}
	
	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
	
	.record-list {
		height: 800rpx;
	}
	
	.record-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.student-info {
		display: flex;
		align-items: center;
	}
	
	.student-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.student-detail {
		display: flex;
		flex-direction: column;
	}
	
	.student-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 6rpx;
	}
	
	.exam-time {
		font-size: 24rpx;
		color: #999;
	}
	
	.record-score {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	
	.score-value {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 6rpx;
	}
	
	.score-status {
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
	}
	
	.score-pass {
		color: #52c41a;
	}
	
	.score-pass .score-status {
		background-color: #f6ffed;
		color: #52c41a;
	}
	
	.score-fail {
		color: #ff4d4f;
	}
	
	.score-fail .score-status {
		background-color: #fff1f0;
		color: #ff4d4f;
	}
	
	.loading-more, .no-more {
		text-align: center;
		padding: 20rpx 0;
		font-size: 26rpx;
		color: #999;
	}
	
	.analytics-section {
		margin-bottom: 30rpx;
	}
	
	.analytics-header {
		margin-bottom: 20rpx;
	}
	
	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}
	
	.analytics-desc {
		font-size: 24rpx;
		color: #999;
		margin-left: 20rpx;
	}
	
	.score-distribution {
		margin-top: 20rpx;
	}
	
	.distribution-item {
		margin-bottom: 16rpx;
	}
	
	.distribution-label {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 8rpx;
	}
	
	.distribution-bar-container {
		height: 30rpx;
		background-color: #f5f5f5;
		border-radius: 6rpx;
		position: relative;
		overflow: hidden;
	}
	
	.distribution-bar {
		height: 100%;
		background-color: #1BAE76;
		border-radius: 6rpx;
	}
	
	.distribution-value {
		position: absolute;
		right: 10rpx;
		top: 0;
		font-size: 22rpx;
		color: #fff;
		line-height: 30rpx;
		text-shadow: 0 0 2rpx rgba(0, 0, 0, 0.3);
	}
	
	.error-questions {
		margin-top: 20rpx;
	}
	
	.error-item {
		background-color: #f9f9f9;
		border-radius: 8rpx;
		padding: 16rpx;
		margin-bottom: 16rpx;
	}
	
	.error-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}
	
	.error-question-num {
		font-size: 26rpx;
		font-weight: bold;
		color: #333;
	}
	
	.error-rate {
		font-size: 24rpx;
		color: #ff4d4f;
	}
	
	.error-question-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
	}
	
	.view-all {
		text-align: center;
		padding: 16rpx 0;
	}
	
	.view-all text {
		font-size: 26rpx;
		color: #1BAE76;
	}
	
	.loading-state {
		text-align: center;
		padding: 100rpx 0;
		font-size: 28rpx;
		color: #999;
	}
	
	.filter-section {
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.filter-item {
		margin-bottom: 16rpx;
	}
	
	.label {
		font-size: 26rpx;
		color: #999;
		margin-right: 10rpx;
	}
</style> 